"use client";

import { Card, CardContent } from "@/components/ui/card";
import Image from "next/image";
import Link from "next/link";

interface LiveStreamProps {
  id: string;
  title: string;
  thumbnailUrl: string;
  viewerCount: string;
  streamerName: string;
  category: string;
}

const liveStreams: LiveStreamProps[] = [
  {
    id: "1",
    title: "【APEX】排位上分日",
    thumbnailUrl: "https://ext.same-assets.com/704160476/2749231591.avif",
    viewerCount: "1.3万",
    streamerName: "游戏主播小明",
    category: "APEX英雄"
  },
  {
    id: "2",
    title: "【直播】3倍经验周末特训",
    thumbnailUrl: "https://ext.same-assets.com/498841478/1553909019.avif",
    viewerCount: "5.2千",
    streamerName: "英雄联盟官方",
    category: "英雄联盟"
  },
  {
    id: "3",
    title: "来和主播一起画画吧~",
    thumbnailUrl: "https://ext.same-assets.com/4197619004/2600288579.avif",
    viewerCount: "4.6千",
    streamerName: "梦幻画师",
    category: "绘画"
  },
  {
    id: "4",
    title: "【音乐】钢琴演奏会",
    thumbnailUrl: "https://ext.same-assets.com/668760204/563054540.avif",
    viewerCount: "2.7千",
    streamerName: "古典音乐频道",
    category: "音乐"
  }
];

function LiveStreamCard({ id, title, thumbnailUrl, viewerCount, streamerName, category }: LiveStreamProps) {
  return (
    <Link href={`/live/${id}`}>
      <Card className="overflow-hidden border-none transition-all hover:-translate-y-1 hover:shadow-md">
        <div className="relative aspect-video">
          <Image
            src={thumbnailUrl}
            alt={title}
            fill
            className="object-cover"
          />
          <div className="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded-sm flex items-center">
            <span className="block w-2 h-2 mr-1 bg-white rounded-full"></span>
            直播中
          </div>
          <div className="absolute bottom-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded-sm">
            {viewerCount}人观看
          </div>
        </div>
        <CardContent className="p-3">
          <h3 className="text-sm font-medium line-clamp-1">{title}</h3>
          <div className="flex justify-between mt-2 text-xs text-gray-500">
            <span className="truncate">{streamerName}</span>
            <span className="truncate text-gray-400">{category}</span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}

export default function LiveStreams() {
  return (
    <div className="container mx-auto py-4">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-bold">
          <span className="inline-block w-2 h-4 mr-1 bg-red-600"></span>
          正在直播
        </h2>
        <Link href="/live" className="text-sm text-primary hover:underline">
          查看更多
        </Link>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        {liveStreams.map((stream) => (
          <LiveStreamCard key={stream.id} {...stream} />
        ))}
      </div>
    </div>
  );
}
